<template>
  <!--新增界面-->
  <div>
      <el-dialog v-loading.fullscreen.lock="loading" element-loading-text="处理中......" title="新增险种"
                 :visible.sync="dialogVisible" size="large" :close-on-click-modal="false" :close-on-press-escape="false"
                 :before-close="off" :top="dialog_margin_top">
        <el-form label-width="150px">
          <el-row :span="24">
            <el-col :span="8">
              <el-form-item label="险种代码" required>
                <el-input v-model="formData.riskcode" :maxlength="2" size="small" @keyup.native="checkCode()">
                  <el-select v-model="clazz" value-key="classcode" slot="prepend" placeholder="请选择" style="width: 65px">
                    <el-option v-for="item in classOptions" :key="item.classcode" :label="item.classcode"
                               :value="item"></el-option>
                  </el-select>
                </el-input>
                <span v-show="warning" style="color:red; font-size:12px">该险种代码已存在！</span>
              </el-form-item>
              <el-form-item label="险种版本" required>
                <el-select v-model="formData.riskversion" size="small">
                  <el-option v-for="item in versionOptions" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="险种中文名称" required>
                <el-input v-model="formData.riskcname" size="small"></el-input>
              </el-form-item>
              <el-form-item label="险种英文名称" required>
                <el-input v-model="formData.riskename" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="危险单位划分方式" required>
                <el-select v-model="formData.dangerSplitMode" size="small">
                  <el-option v-for="item in dangerSplitModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="危险单位展示方式" required>
                <el-select v-model="formData.dangerViewType" size="small">
                  <el-option v-for="item in dangerViewTypeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试算方式" required>
                <el-select v-model="formData.reinsTrialMode" size="small">
                  <el-option v-for="item in reinsTrialModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="风险评估方式" required>
                <el-select v-model="formData.riskEvaluateMode" size="small">
                  <el-option v-for="item in riskEvaluateModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="风险累积方式" required>
                <el-select v-model="formData.riskPoolMode" size="small">
                  <el-option v-for="item in riskPoolModeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否组合险">
                <el-select v-model="formData.compositeflag" placeholder="是否组合险" size="small" disabled>
                  <el-option v-for="item in compositeOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="有效标识" required>
                <el-select v-model="formData.validstatus" size="small">
                  <el-option v-for="item in validOptions" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="险种标识">
                <el-input v-model="formData.riskflag" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <v-table
          is-horizontal-resize
          style="width:100%"
          :columns="fhColumns"
          :table-data="formData.fhData"
          row-hover-color="#eee"
          row-click-color="#edf7ff"
          @on-custom-comp="fhOperation"
        ></v-table>
        <br>
        <el-form label-width="150px" >
          <el-row :span="24">
            <el-col :span="19">&nbsp;</el-col>
            <el-col :span="5">
              <el-button type="primary" size="small" @click="newFhtreaty">添加适用合约</el-button>
              <el-button type="danger" size="small" @click="fhOperation({type:'delete'})">删除最后一行</el-button>
            </el-col>
          </el-row>
        </el-form>
        <br>
        <v-table
          is-horizontal-resize
          style="width:100%"
          :columns="fhxColumns"
          :table-data="formData.fhxData"
          row-hover-color="#eee"
          row-click-color="#edf7ff"
          @on-custom-comp="fhxOperation"
        ></v-table>
        <br>
        <el-form label-width="150px" >
          <el-row :span="24">
            <el-col :span="19">&nbsp;</el-col>
            <el-col :span="5">
              <el-button type="primary" size="small" @click="newFhxtreaty">添加适用超赔合约</el-button>
              <el-button type="danger" size="small" @click="fhxOperation({type:'delete'})">删除最后一行</el-button>
            </el-col>
          </el-row>
        </el-form>

          <span slot="footer" class="dialog-footer">
             <el-button @click="off">取 消</el-button>
             <el-button type="warning" @click="add">保 存</el-button>
          </span>
      </el-dialog>
      <FhexitemkindSelect  v-if="showFhexitemkindDialog"></FhexitemkindSelect>
  </div>
</template>

<script>
  import ClassAPI from "../../../../js/production/class/classAPI"
  import RiskAPI from "../../../../js/production/risk/riskAPI"
  import Validations from "../../../../js/production/validations"
  import FhexitemkindSelect from "./FhexitemkindSelect"
  import Vue from 'vue'
  export default {
    components: {
      FhexitemkindSelect,
    },
    data() {
      return {
        dialog_margin_top: '5%',
        dialogVisible: true,
        formData: {
          riskcode: '',
          classcode: '',
          riskversion: '1.0',
          riskcname: '',
          riskename: '',
          effectivestartdate: null,
          invalidenddate: null,
          compositeflag: '',
          validstatus: '1',
          riskflag:'',
          dangerSplitMode: '',
          dangerViewType: '0',
          reinsTrialMode: '0',
          riskEvaluateMode: '0',
          riskPoolMode: '0',
          fhData: [],
          fhxData: [],
        },
        tempRiskcode: '',
        clazz: {},
        classOptions: [],
        validOptions: [
          {label: '1-有效', value: '1'},
          {label: '0-无效', value: '0'}
        ],
        compositeOptions: [
          {label: '是', value: '1'},
          {label: '否', value: '0'}
        ],
        versionOptions: [
          {label: '1.0', value: '1.0'},
        ],
        dangerSplitModeOptions: [
          {label: '按单', value: '0'},
          {label: '按地址', value: '1'},
          {label: '按人', value: '2'},
          {label: '按组合险', value: '3'},
          {label: '按保单（货运险大保单）', value: '4'},
          {label: '按险种（通用产品）', value: '5'},
          {label: '按职业和方案号', value: '6'},
        ],
        dangerViewTypeOptions: [
          {label: '默认', value: '0'},
          {label: '团单方式', value: '1'},
          {label: '责任险和工程险（含有PML值的）', value: '2'},
        ],
        reinsTrialModeOptions: [
          {label: '默认', value: '0'},
          {label: '意健险方式', value: '1'},
        ],
        riskEvaluateModeOptions: [
          {label: '默认', value: '0'},
          {label: '按险种、业务年', value: '1'},
          {label: '按险种、业务年、工种等级', value: '2'},
        ],
        riskPoolModeOptions: [
          {label: '默认', value: '0'},
          {label: '按风险地址累积（财产险）', value: '1'},
          {label: '按船、飞机累积（货运险）', value: '2'},
          {label: '按证件号（身份证或其他证件）（意建险）', value: '3'},
          {label: '按地址（安装工程险 只累积物质损失部分）', value: '4'},
          {label: '按地址（险种内部累积）', value: '5'},
        ],
        inrateflagOptions: [
          {label: '不使用', value: '0'},
          {label: '使用', value: '1'},
        ],
        fhtreatyOptions: [],
        fhsectionOptions: [],
        fhxtreatyOptions: [],
        fhxlayerOptions: [],
        fhxsectionOptions: [],
        showFhexitemkindDialog: false,
        loading: false,
        warning: false,
        fhColumns: [
          {
            field: 'serialno', title:'序号', width: 50, titleAlign: 'center', columnAlign: 'center',
            formatter: function (rowData,rowIndex,pagingIndex,field) {
              return rowIndex + 1
            }, isFrozen: true,isResize:true
          },
          {field: 'fhtreaty', title: '适用合约',width: 100, titleAlign: 'center',columnAlign:'center',componentName:'fhtreaty-select',isResize:true},
          {field: 'fhsection', title:'合约节', width: 80, titleAlign: 'center',columnAlign:'center',componentName:'fhsection-select',isResize:true},
          {field: 'fhexitemkind', title: '合约除外责任条件', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'fhexitemkind-input',isResize:true},
          {field: 'inrateflag', title: '分入比例规则', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'inrateflag-select',isResize:true},
        ],
        fhxColumns: [
          {
            field: 'serialno', title:'序号', width: 50, titleAlign: 'center', columnAlign: 'center',
            formatter: function (rowData,rowIndex,pagingIndex,field) {
              return rowIndex + 1
            }, isFrozen: true,isResize:true
          },
          {field: 'fhxtreaty', title: '适用超赔合约',width: 100, titleAlign: 'center',columnAlign:'center',componentName:'fhxtreaty-select',isResize:true},
          {field: 'fhxlayer', title: '超赔合约层', width: 150, titleAlign: 'center',columnAlign:'center',componentName:'fhxlayer-select',isResize:true},
          {field: 'fhxsection', title:'超赔合约节', width: 80, titleAlign: 'center',columnAlign:'center',componentName:'fhxsection-select',isResize:true},
        ],
        tmpFhindex: '',
      }
    },
    mounted() {
      ClassAPI.initClassSelect(this);
      RiskAPI.initFhtreatyOptions(this);
      RiskAPI.initFhxtreatyOptions(this);
      this.clazz = this.classOptions[0];
      this.formData.compositeflag = this.clazz.compositeflag;
      this.formData.classcode = this.clazz.classcode;
    },
    watch: {
      clazz(newVal, oldVal) {
        this.checkCode();
        this.formData.compositeflag = newVal.compositeflag;
        this.formData.classcode = newVal.classcode;
      }
    },
    methods: {
      add() {
        if (this.formData.riskcode.length != 2) {
          this.$message({type: 'error', message: '险种代码必须为4位数字，请重新输入！'});
        } else if (this.warning) {
          this.$message({type: 'error', message: '险种代码已被使用，请重新输入！'});
        } else {
          if (this.formData.dangerSplitMode === '' || this.formData.dangerSplitMode === null) {
            this.$message({type: 'error',message: '请选择危险单位划分方式!'});
            return;
          }
          if (this.formData.fhData.length > 0) {
            for(let i = 0; i < this.formData.fhData.length; i++) {
              if (this.formData.fhData[i].fhtreaty === '') {
                this.$message({type: 'error',message: '请先选择适用合约!'});
                return;
              } else if (this.formData.fhData[i].fhsection === '') {
                this.$message({type: 'error',message: '请先选择合约节!'});
                return;
              }
            }
          }
          if (this.formData.fhxData.length > 0) {
            for(let i = 0; i < this.formData.fhxData.length; i++) {
              if (this.formData.fhxData[i].fhxtreaty === '') {
                this.$message({type: 'error',message: '请先选择适用超赔合约!'});
                return;
              } else if (this.formData.fhxData[i].fhxlayer === '') {
                this.$message({type: 'error',message: '请先选择超赔合约层!'});
                return;
              } else if (this.formData.fhxData[i].fhxsection === '') {
                this.$message({type: 'error',message: '请先选择超赔合约节!'});
                return;
              }
            }
          }
          this.tempRiskcode = this.formData.riskcode;
          this.formData.riskcode = this.clazz.classcode + this.formData.riskcode;
          RiskAPI.add(this);
        }
      },
      off() {
        this.$parent.showAddDialog = false;
      },
      checkCode() {
        this.formData.riskcode = this.formData.riskcode.replace(/[^\d]/g, ""); //只能输入数字
        if ('undefined' != typeof(this.formData.riskcode) && '' != this.formData.riskcode && this.formData.riskcode.length == 2) {
          RiskAPI.checkRiskCodeUsed(this);
        }
      },
      newFhtreaty() {
        let record = {fhtreaty:'',fhsection:'',fhexitemkind:'',inrateflag:'1',fhexitemkindArray:[],fhtreatyOptions:[],fhsectionOptions:[],inrateflagOptions:[]};
        record.fhtreatyOptions = this.fhtreatyOptions;
        record.inrateflagOptions = this.inrateflagOptions;
        this.$set(this.formData.fhData,this.formData.fhData.length,record);
      },
      newFhxtreaty() {
        let record = {fhxtreaty:'',fhxlayer:'',fhxsection:'',fhxtreatyOptions:[],fhxlayerOptions:[],fhxsectionOptions:[]};
        record.fhxtreatyOptions = this.fhxtreatyOptions;
        this.$set(this.formData.fhxData,this.formData.fhxData.length,record);
      },
      fhOperation(params){
        if (params.type === 'delete'){
          this.$delete(this.formData.fhData, this.formData.fhData.length - 1);
        } else if (params.type === 'selectFhtreaty') {
          this.formData.fhData[params.index].fhtreaty = params.tmpVal;
          RiskAPI.initFhsectionOptions(this,params.index);
          this.formData.fhData[params.index].fhsectionOptions = this.fhsectionOptions;
          this.formData.fhData[params.index].fhsection = "";
          this.formData.fhData[params.index].fhexitemkind = "";
          this.formData.fhData[params.index].fhexitemkindArray = [];
        } else if (params.type === 'selectFhsection') {
          this.formData.fhData[params.index].fhsection = params.tmpVal;
          this.formData.fhData[params.index].fhexitemkind = "";
          this.formData.fhData[params.index].fhexitemkindArray = [];
        } else if (params.type === 'selectFhexitemkind') {
          if (this.formData.fhData[params.index].fhsection === '') {
            this.$message({type: 'error',message: '请先选择合约节!'});
            return;
          }
          this.tmpFhindex = params.index;
          this.showFhexitemkindDialog = true;
        } else if (params.type === 'selectInrateFlag') {
          this.formData.fhData[params.index].inrateflag = params.tmpVal;
        }
      },
      fhxOperation(params){
        if (params.type === 'delete'){
          this.$delete(this.formData.fhxData, this.formData.fhxData.length - 1);
        } else if (params.type === 'selectFhxtreaty') {
          this.formData.fhxData[params.index].fhxtreaty = params.tmpVal;
          RiskAPI.initFhxlayerOptions(this,params.index);
          this.formData.fhxData[params.index].fhxlayerOptions = this.fhxlayerOptions;
          this.formData.fhxData[params.index].fhxlayer = "";
          this.formData.fhxData[params.index].fhxsection = "";
          this.formData.fhxData[params.index].fhxsectionOptions = [];
        } else if (params.type === 'selectFhxlayer') {
          this.formData.fhxData[params.index].fhxlayer = params.tmpVal;
          RiskAPI.initFhxsectionOptions(this,params.index);
          this.formData.fhxData[params.index].fhxsectionOptions = this.fhxsectionOptions;
          this.formData.fhxData[params.index].fhxsection = "";
        } else if (params.type === 'selectFhxsection') {
          this.formData.fhxData[params.index].fhxsection = params.tmpVal;
        }
      },
    }
  }

  // fh自定义列组件
  Vue.component('fhtreaty-select',{
    template:`<el-select v-model="rowData.fhtreaty" filterable size="small" @change="select">
                  <el-option v-for="item in rowData.fhtreatyOptions"
                             :key="item.value"
                             :label="item.value + '-'+ item.label"
                             :value="item.value">
                  </el-option>
              </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhtreaty',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhtreaty};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhsection-select',{
    template:`<el-select v-model="rowData.fhsection" filterable size="small" @change="select">
                  <el-option v-for="item in rowData.fhsectionOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhsection',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhsection};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhexitemkind-input',{
    template:`<el-input v-model="rowData.fhexitemkind" :title="rowData.fhexitemkind" size="small" @click.native="select"></el-input>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhexitemkind',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhexitemkind};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('inrateflag-select',{
    template:`<el-select v-model="rowData.inrateflag" size="small" @change="select">
                  <el-option v-for="item in rowData.inrateflagOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectInrateFlag',index:this.index,rowData:this.rowData,tmpVal:this.rowData.inrateflag};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  // fhx自定义列组件
  Vue.component('fhxtreaty-select',{
    template:`<el-select v-model="rowData.fhxtreaty" filterable size="small" @change="select">
                  <el-option v-for="item in rowData.fhxtreatyOptions"
                             :key="item.value"
                             :label="item.value + '-'+ item.label"
                             :value="item.value">
                  </el-option>
              </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxtreaty',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxtreaty};
        this.$emit('on-custom-comp',params);
      },
    }
  })

  Vue.component('fhxlayer-select',{
    template:`<el-select v-model="rowData.fhxlayer" filterable size="small" @change="select">
                  <el-option v-for="item in rowData.fhxlayerOptions" :key="item.value" :label='item.value + (item.label !== null ? "-" + item.label : "")'
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxlayer',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxlayer};
        this.$emit('on-custom-comp',params);
      },
    }
  })
  Vue.component('fhxsection-select',{
    template:`<el-select v-model="rowData.fhxsection" filterable size="small" @change="select">
                  <el-option v-for="item in rowData.fhxsectionOptions" :key="item.value" :label="item.value + '-'+ item.label"
                             :value="item.value"></el-option>
                </el-select>`,
    props:{
      rowData:{
        type:Object
      },
      field:{
        type:String
      },
      index:{
        type:Number
      },
    },
    methods:{
      select(){
        // 参数根据业务场景随意构造
        let params = {type:'selectFhxsection',index:this.index,rowData:this.rowData,tmpVal:this.rowData.fhxsection};
        this.$emit('on-custom-comp',params);
      },
    }
  })

</script>
